<!DOCTYPE html>
<style>
  #iframe {
      display: block;
      width: 100%;
      height: 100px;
  }
  #scrollable {
      position: relative;
      overflow: auto;
      height: 100px;
  }
  #shapeshifter {
      position: relative;
      overflow: auto;
      height: 100px;
  }
  @media print {
      #shapeshifter {
          display: flex;
          overflow: visible;
      }

      #shapeshifter * {
          display: none;
      }
  }
</style>
<iframe id="iframe" src="iframe-with-square.html"></iframe>
<div id="scrollable">
  <script>
    for (var i = 0; i < 200; i++)
        document.write("filler ");
  </script>
  <div id="scrollabletarget" style="width:100px; height:100px; background:green;"></div>
  <script>
    for (var i = 0; i < 200; i++)
        document.write("filler ");
  </script>
</div>
<div id="shapeshifter">
  <script>
    for (var i = 0; i < 200; i++)
        document.write("filler ");
  </script>
  <div id="shapeshiftertarget" style="width:100px; height:100px; background:green;"></div>
  <script>
    for (var i = 0; i < 200; i++)
        document.write("filler ");
  </script>
</div>

<script>
  onload = function() {
      var scroll = iframe.contentWindow.document.getElementById("target").offsetTop;
      iframe.contentWindow.scrollTo(0, scroll);
      scrollable.scrollTop = scrollabletarget.offsetTop;
      shapeshifter.scrollTop = shapeshiftertarget.offsetTop;
  }
</script>
